import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Divider, Button, Spin } from 'antd'
import { getOffHospitalDetail, printOrderManagerCollect } from '@/services/order/api';
import { showMsg, groupBy, isNull, print } from '@/utils/utils';
// @ts-ignore
import QRCode from 'qrcode.react';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

const Detail: React.FC<any> = (props) => {
  const { 
    record = {},
    patientInfo = {}, 
    onFinish
  } = props;

  const [detail, setDetail] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const columns: ProColumns<any>[] = [
    {
      title: '账单类型',
      dataIndex: 'order_type',
      valueType: 'select',
      valueEnum: {
        P: '计划订单',
        O: '一次性订单',
        R: '租赁订单' 
      },
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name'
    },
   
    {
      title: '规格（单位）',
      dataIndex: 'specs_name',
      render: (val, record1) => record1.order_type === 'R' ? '-' : val
    },
    {
      title: '单价',
      dataIndex: 'goods_price',
      valueType: 'money',
      align: 'right'
    },
    {
      title: '用量',
      dataIndex: 'total_goods_num',
      align: 'right',
    },
  ]

  useEffect(() => {
    getDetail();
  }, []);

  const printPage = () => {
    // 打印结算单
    setTimeout(() => {
      print(document.querySelector('.printPage .ant-modal'), {
        size: 'portrait'
      });
      setTimeout(() => {
        onFinish();
      }, 5000);
    }, 500);
  }

  // 获得结算详情（用于打印）
  const getDetail = async () => {
    const params = {
      patient_id: patientInfo.patient_id,
      admission_num: patientInfo.visit_no,
      current: 1,
      pageSize: 10000,
      order_id: '',
      // manager_order_id: record.manager_order_id,
    }
    try {
      const data = await printOrderManagerCollect({
        ...params
      })
      setDetail(Object.assign({}, data));
      printPage();
    } catch (error) {
      setLoading(false);
      showMsg(error?.data?.errmsg);
    }
  }

  return (
    <Modal
      title={<div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 16 }}>缴费单</div>}
      wrapClassName="bill-modal printPage"
      width="100%"
      visible
      footer={null}
      closable={false}
    >
      <div className="order-modal-content">
        <div className='common_title'>1.患者信息</div>
        <Divider style={{margin: '10px 0'}} />
        <div style={{ display: 'flex' }}>
          <Descriptions column={1}>
            <Descriptions.Item label="身份证/住院号" span={2}>{patientInfo.identity_no} / {patientInfo.admission_num}</Descriptions.Item>
            <Descriptions.Item label="患者姓名">{patientInfo.patient_name}</Descriptions.Item>
            <Descriptions.Item label="归属科室">{patientInfo.admission_dept_name || patientInfo.admission_dept_code}</Descriptions.Item>
          </Descriptions>
          {
            (detail.pay_qr_code_url && detail.pay_status === 'W') && 
            <Descriptions className='print_ewm'>
              <Descriptions.Item label="扫码支付">
                <QRCode
                  // value参数为生成二维码的链接
                  value={detail.pay_qr_code_url || ''}  
                  // 二维码的宽高尺寸
                  size={120} 
                  // 二维码的颜色
                  fgColor="#000"  
                  renderAs="svg"
                />
              </Descriptions.Item>
            </Descriptions> 
          }
        </div>
       
        <div className='common_title'>2.商品信息</div>
        <Divider />
        <ProTable<any> 
          rowKey={() => {
            return (Math.random() * 10000).toFixed(2)
          }}
          style={{ marginTop:10 }}
          columns={columns}
          pagination={false}
          search={false}
          options={false}
          dataSource={detail.record_list || []}
          bordered />

        <div className='common_title'>3.结算信息</div>
        <Divider style={{margin: '10px 0'}} />
        <div style={{ display: 'flex' }}>
          <Descriptions column={2} style={{ flex: 1 }}>
            <Descriptions.Item label="订单编号">{detail.manager_order_id}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{(detail.create_date ?? '') + ' ' + (detail.create_time ?? '')}</Descriptions.Item>
            {
              detail.pay_time && <Descriptions.Item label="支付时间">{detail.pay_time}</Descriptions.Item>
            }
            <Descriptions.Item label="订单金额">
              <span style={{color: '#F5232D', fontWeight: 'bold'}}>{detail.total_price}</span>（元）
            </Descriptions.Item>
            <Descriptions.Item label="商品数量">
              <span style={{color: '#F5232D', fontWeight: 'bold'}}>{detail.total_goods_num}（件）</span>
            </Descriptions.Item>
            <Descriptions.Item label="优惠合计">
              <span style={{color: '#F5232D', fontWeight: 'bold'}}>{parseFloat(parseFloat(detail.total_price) - parseFloat(detail.total_sett_price)).toFixed(2)}</span>（元）
            </Descriptions.Item>
            <Descriptions.Item label="结算价格">
              <span style={{color: '#F5232D', fontWeight: 'bold'}}>{detail.total_sett_price}</span>（元）
            </Descriptions.Item>
          </Descriptions> 
        </div>
      </div>
      </Modal>
    )
}
export default Detail;
